<template>
  <div class="bottom">
    <ul>
      <li v-for="item in bottomNav" :key="item.id" @click="to(item.url)">
        <img :src="item.url==$route.path?'/img/tabbar/'+item.imgs_active:'/img/tabbar/'+item.imgs" alt="">
        <p>{{item.txt}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "bottom",
  data() {
    return {
      bottomNav: [
        {
          txt: "首页",
          imgs: "home.svg",
          imgs_active: "home_active.svg",
          url: "/Home",
          id: 1,
        },
        {
          txt: "分类",
          imgs: "category.svg",
          imgs_active: "category_active.svg",
          url: "/Classify",
          id: 2,
        },
        {
          txt: "购物车",
          imgs: "cart.svg",
          imgs_active: "cart_active.svg",
          url: "/Shop",
          id: 3,
        },
        {
          txt: "我的",
          imgs: "profile.svg",
          imgs_active: "profile_active.svg",
          url: "/my",
          id: 4,
        },
      ],
    };
  },
  methods: {
        to(url){
              this.$router.push(url)
        }
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: #eee solid 1px;
  padding: 5px 0;
  ul {
    width: 100%;
    display: flex;
    text-align: center;

    li {
      flex: 1;
      img {
        width: 25px;
      }
    }
  }
}
</style>